import React from 'react';
import { User } from '../App';
import { Button } from './ui/button';
import { 
  Home, 
  BookOpen, 
  GraduationCap, 
  Calendar,
  Users,
  ClipboardCheck,
  Settings,
  BarChart3,
  FileText,
  Bell,
  LogOut
} from 'lucide-react';

interface NavigationSidebarProps {
  user: User;
  activeView: string;
  onViewChange: (view: string) => void;
  onLogout: () => void;
}

export function NavigationSidebar({ user, activeView, onViewChange, onLogout }: NavigationSidebarProps) {
  const getMenuItems = () => {
    switch (user.role) {
      case 'student':
        return [
          { id: 'dashboard', label: '个人首页', icon: Home },
          { id: 'course-selection', label: '选课管理', icon: BookOpen },
          { id: 'grade-query', label: '成绩查询', icon: GraduationCap },
          { id: 'attendance-record', label: '考勤记录', icon: Calendar },
        ];
      case 'teacher':
        return [
          { id: 'dashboard', label: '工作台', icon: Home },
          { id: 'course-management', label: '课程管理', icon: BookOpen },
          { id: 'grade-management', label: '成绩管理', icon: GraduationCap },
          { id: 'attendance-management', label: '考勤管理', icon: ClipboardCheck },
        ];
      case 'admin':
        return [
          { id: 'dashboard', label: '管理首页', icon: Home },
          { id: 'user-management', label: '用户管理', icon: Users },
          { id: 'course-system', label: '课程体系', icon: BookOpen },
          { id: 'statistics', label: '数据统计', icon: BarChart3 },
          { id: 'system-config', label: '系统配置', icon: Settings },
        ];
      default:
        return [];
    }
  };

  const menuItems = getMenuItems();

  return (
    <div className="flex flex-col h-full">
      {/* Logo and Title */}
      <div className="p-6 border-b">
        <div className="flex items-center space-x-3">
          <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
            <GraduationCap className="w-5 h-5 text-primary-foreground" />
          </div>
          <div>
            <h2 className="font-medium">教务管理系统</h2>
            <p className="text-sm text-muted-foreground">
              {user.role === 'student' && '学生端'}
              {user.role === 'teacher' && '教师端'}
              {user.role === 'admin' && '管理端'}
            </p>
          </div>
        </div>
      </div>

      {/* User Info */}
      <div className="p-4 border-b bg-muted/50">
        <div className="flex items-center space-x-3">
          <div className="w-10 h-10 bg-primary/10 rounded-full flex items-center justify-center">
            <span className="text-sm font-medium text-primary">
              {user.name.charAt(0)}
            </span>
          </div>
          <div className="flex-1 min-w-0">
            <p className="font-medium truncate">{user.name}</p>
            <p className="text-sm text-muted-foreground truncate">
              {user.studentId || user.teacherId || user.email}
            </p>
          </div>
        </div>
      </div>

      {/* Navigation Menu */}
      <nav className="flex-1 p-4">
        <div className="space-y-1">
          {menuItems.map((item) => {
            const Icon = item.icon;
            return (
              <Button
                key={item.id}
                variant={activeView === item.id ? "secondary" : "ghost"}
                className="w-full justify-start h-10"
                onClick={() => onViewChange(item.id)}
              >
                <Icon className="mr-3 h-4 w-4" />
                {item.label}
              </Button>
            );
          })}
        </div>
      </nav>

      {/* Notifications and Logout */}
      <div className="p-4 border-t space-y-1">
        <Button variant="ghost" className="w-full justify-start h-10">
          <Bell className="mr-3 h-4 w-4" />
          消息通知
          <span className="ml-auto bg-red-500 text-white text-xs rounded-full px-2 py-1">
            3
          </span>
        </Button>
        <Button 
          variant="ghost" 
          className="w-full justify-start h-10 text-red-600 hover:text-red-600 hover:bg-red-50"
          onClick={() => {
            if (window.confirm('确定要退出登录吗？')) {
              onLogout();
            }
          }}
        >
          <LogOut className="mr-3 h-4 w-4" />
          退出登录
        </Button>
      </div>
    </div>
  );
}